<template>
  <view class="answer-card-container">
    <!-- 遮罩层 -->
    <view class="mask" @click="close" v-if="visible"></view>
    
    <!-- 答题卡主体 -->
    <view class="answer-card" :class="{ 'show': visible }">
      <!-- 头部 -->
      <view class="card-header">
        <text class="header-title">答题卡</text>
        <view class="close-btn" @click="close">
          <text class="close-icon">✕</text>
        </view>
      </view>
      
      <!-- 统计信息 -->
      <view class="statistics">
        <view class="stat-item">
          <text class="stat-number">{{ answeredCount }}</text>
          <text class="stat-label">已答</text>
        </view>
        <view class="stat-divider"></view>
        <view class="stat-item">
          <text class="stat-number correct-color">{{ correctCount }}</text>
          <text class="stat-label">正确</text>
        </view>
        <view class="stat-divider"></view>
        <view class="stat-item">
          <text class="stat-number error-color">{{ errorCount }}</text>
          <text class="stat-label">错误</text>
        </view>
        <view class="stat-divider"></view>
        <view class="stat-item">
          <text class="stat-number">{{ unansweredCount }}</text>
          <text class="stat-label">未答</text>
        </view>
      </view>
      
      <!-- 状态说明 -->
      <view class="legend">
        <view class="legend-item">
          <view class="legend-badge unanswered"></view>
          <text class="legend-text">未作答</text>
        </view>
        <view class="legend-item">
          <view class="legend-badge correct"></view>
          <text class="legend-text">答对</text>
        </view>
        <view class="legend-item">
          <view class="legend-badge error"></view>
          <text class="legend-text">答错</text>
        </view>
      </view>
      
      <!-- 题目网格 -->
      <scroll-view class="questions-grid" scroll-y>
        <view class="grid-container">
          <view 
            class="question-number" 
            v-for="(item,index) in questions" 
            :key="index"
            :class="questionClasses[index]"
            @click="selectQuestion(index)"
          >
            <text class="number-text">{{ index + 1 }}</text>
          </view>
        </view>
      </scroll-view>
      
      <!-- 底部按钮 -->
      <view class="card-footer">
        <view class="footer-btn" @click="close">
          <text class="footer-btn-text">关闭</text>
        </view>
        <view class="footer-btn primary" @click="handleSubmit" v-if="showSubmit">
          <text class="footer-btn-text">提交答卷</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'AnswerCard',
  props: {
    // 是否显示答题卡
    visible: {
      type: Boolean,
      default: false
    },
    // 题目列表
    questions: {
      type: Array,
      default: () => [],
      // 每个题目对象格式：
      // {
      //   id: '题目ID',
      //   hasAnswered: false,    // 是否作答
      //   isCorrect: null     // 是否正确（null: 未作答, true: 正确, false: 错误）
      // }
    },
    // 当前题目索引
    currentIndex: {
      type: Number,
      default: 0
    },
    // 是否显示提交按钮
    showSubmit: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    // 已答题数量
    answeredCount() {
      return this.questions.filter(q => q.hasAnswered).length
    },
    // 正确数量
    correctCount() {
      return this.questions.filter(q => q.hasAnswered && q.isCorrect === true).length
    },
    // 错误数量
    errorCount() {
      return this.questions.filter(q => q.hasAnswered && q.isCorrect === false).length
    },
    // 未答题数量
    unansweredCount() {
      return this.questions.filter(q => !q.hasAnswered).length
    },
    // 题目样式类计算属性
    questionClasses() {
      const classes = {}
      this.questions.forEach((item, index) => {
        classes[index] = this.getQuestionClass(item)
      })
      return classes
    }
  },
  methods: {
    // 关闭答题卡
    close() {
      this.$emit('close')
    },
    // 选择题目
    selectQuestion(index) {
      this.$emit('select', index)
      this.close()
    },
    // 获取题目样式类
    getQuestionClass(item) {
      const classes = []
      
      // 当前题目
      if (this.questions.indexOf(item) === this.currentIndex) {
        classes.push('current')
      }
      
      // 未作答
      if (!item.hasAnswered) {
        classes.push('unanswered')
        return classes.join(' ')
      }
      
      // 答对
      if (item.isCorrect === true) {
        classes.push('correct')
      }
      // 答错
      else if (item.isCorrect === false) {
        classes.push('error')
      }
      
      return classes.join(' ')
    },
    // 提交答卷
    handleSubmit() {
      this.$emit('submit')
    }
  }
}
</script>

<style lang="scss" scoped>
.answer-card-container {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 999;
  pointer-events: none;
}

.mask {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  pointer-events: auto;
  animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.answer-card {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  max-height: 80vh;
  background: #fff;
  border-radius: 30rpx 30rpx 0 0;
  display: flex;
  flex-direction: column;
  transform: translateY(100%);
  transition: transform 0.3s ease;
  pointer-events: auto;
}

.answer-card.show {
  transform: translateY(0);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30rpx;
  border-bottom: 1rpx solid #f0f0f0;
  flex-shrink: 0;
}

.header-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
}

.close-btn {
  width: 50rpx;
  height: 50rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 25rpx;
  background: #f5f5f5;
}

.close-icon {
  font-size: 32rpx;
  color: #666;
}

.statistics {
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 30rpx;
  background: #f8f9fa;
  flex-shrink: 0;
}

.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8rpx;
}

.stat-number {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
}

.correct-color {
  color: #52c41a;
}

.error-color {
  color: #EA5D33;
}

.stat-label {
  font-size: 24rpx;
  color: #666;
}

.stat-divider {
  width: 1rpx;
  height: 40rpx;
  background: #e0e0e0;
}

.legend {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 40rpx;
  padding: 20rpx 30rpx;
  border-bottom: 1rpx solid #f0f0f0;
  flex-shrink: 0;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 10rpx;
}

.legend-badge {
  width: 40rpx;
  height: 40rpx;
  border-radius: 8rpx;
  border: 2rpx solid #e8e8e8;
  background: #fff;
}

.legend-badge.unanswered {
  background: #fff;
  border-color: #d9d9d9;
}

.legend-badge.correct {
  background: #52c41a;
  border-color: #52c41a;
}

.legend-badge.error {
  background: #EA5D33;
  border-color: #EA5D33;
}

.legend-text {
  font-size: 24rpx;
  color: #666;
}

.questions-grid {
  flex: 1;
  overflow-y: auto;
}

.grid-container {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20rpx;
  padding: 30rpx;
}

.question-number {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12rpx;
  border: 2rpx solid #d9d9d9;
  background: #fff;
  transition: all 0.2s ease;
  position: relative;
}

.question-number:active {
  transform: scale(0.9);
}

.number-text {
  font-size: 28rpx;
  font-weight: bold;
  color: #666;
}

/* 未作答 */
.question-number.unanswered {
  background: #fff;
  border-color: #d9d9d9;
}

.question-number.unanswered .number-text {
  color: #666;
}

/* 答对 */
.question-number.correct {
  background: #52c41a;
  border-color: #52c41a;
}

.question-number.correct .number-text {
  color: #fff;
}

/* 答错 */
.question-number.error {
  background: #EA5D33;
  border-color: #EA5D33;
}

.question-number.error .number-text {
  color: #fff;
}

/* 当前题目 */
.question-number.current::after {
  content: '';
  position: absolute;
  top: -4rpx;
  right: -4rpx;
  width: 20rpx;
  height: 20rpx;
  background: #667eea;
  border-radius: 50%;
  border: 2rpx solid #fff;
}

.card-footer {
  display: flex;
  gap: 20rpx;
  padding: 20rpx 30rpx;
  padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
  border-top: 1rpx solid #f0f0f0;
  background: #fff;
  flex-shrink: 0;
}

.footer-btn {
  flex: 1;
  padding: 20rpx;
  border-radius: 25rpx;
  background: #f5f5f5;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.footer-btn:active {
  transform: scale(0.95);
}

.footer-btn.primary {
  background: linear-gradient(135deg, #667eea, #764ba2);
}

.footer-btn-text {
  font-size: 28rpx;
  font-weight: bold;
  color: #333;
}

.footer-btn.primary .footer-btn-text {
  color: #fff;
}
</style>

